<template>
  <div>
    <DeployGroup
        v-for="g in deployGroups"
        :key="g.id"
        :deployGroup="g"
    />

    <InstanceLog ref="instanceLog"/>
    <InstanceLogFile ref="instanceLogFile"/>
    <InstanceRecord ref="instanceRecord"/>
    <GroupProps ref="groupProps"/>
    <InstanceDialog ref="instanceDialog"/>
    <DeployApplyDialog ref="applyDialog"/>
  </div>

</template>
<script>

import DeployGroup from "../deploy/components/DeployGroup";
import DeployApplyDialog from "./components/DeployApplyDialog"
import InstanceDialog from "./components/InstanceDialog"
import InstanceLog from "./components/InstanceLog";
import InstanceLogFile from "./components/InstanceLogFile";
import InstanceRecord from "./components/InstanceRecord";
import GroupProps from "./components/GroupProps";
import {deployGroupListApi} from "@/api/manage";

export default {
  name: "deploy",
  props: {
    appName: [String],
  },
  data() {
    return {
      timer: null,
      deployGroups: [],
    };
  },
  components: {
    DeployGroup,
    DeployApplyDialog,
    InstanceDialog,
    InstanceLog,
    InstanceLogFile,
    InstanceRecord,
    GroupProps,
  },
  watch: {
    appName() {
      this.loadDeployGroups();
    }
  },
  methods: {
    loadDeployGroups() {
      if (this.appName) {
        deployGroupListApi(this.appName).then(res => this.deployGroups = res);
      }
    },
  },
  created() {
    this.loadDeployGroups();
  }
};
</script>
<style scoped>
.el-breadcrumb {
  line-height: 20px;
  height: 20px;
  display: inline-block;
}

.el-card /deep/ .el-card__header {
  background: #f2f6fc;
  color: #409eff;
}
</style>